.post-content {
  .todo-list {
    list-style: none;

    .span-todo-checkbox {
      display: inline-block;
      position: relative;
      top: 2px;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      box-sizing: border-box;
      width: 14px;
      height: 14px;
      margin-right: 0.25rem;
      background-color: $background-color;
      z-index: 1;
      transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);

      &:after {
        box-sizing: content-box;
        content: "";
        border: 1px solid $background-color;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }

      &.checked {
        background-color: $primary-active-color;
        border-color: $primary-active-color;

        &:after {
          transform: rotate(45deg) scaleY(1);
        }
      }
    }

    .todo-list-input {
      opacity: 0;
      outline: none;
      position: absolute;
      margin: 0;
      width: 0;
      height: 0;
      z-index: -1;
    }
  }
}

@mixin dark-mode {
  .post-content {
    .todo-list {

      .span-todo-checkbox {
        background-color: $dark-main-color;
        border: 1px solid $dark-main-color;

        &.checked {
          background-color: $primary-active-color;
          border-color: $primary-active-color;
        }
      }

      .todo-list-input {
        opacity: 0;
        outline: none;
        position: absolute;
        margin: 0;
        width: 0;
        height: 0;
        z-index: -1;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
